<!--房间设置-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>房间设置</title>
	<link rel="stylesheet" href="../layui/css/layui.css" />
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/uploadImg.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style type="text/css">
  		 a:link{
            text-decoration:none !important;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">MISS后台管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    username
                </a>
            </li>
            <li class="layui-nav-item"><a href="">注销</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                <li class="layui-nav-item">
                    <a href="index.html">首页</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">散客开单</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Guests_check_in.html">宾客入住</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">订单</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Order.html">所有订单</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">宾客结账</a>
                    <dl class="layui-nav-child">
                         <dd><a href="Ordinary_invoicing.html" >结账</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">预定管理</a>
                    <dl class="layui-nav-child">
                        	<dd><a href="Query_book.html">查询预定</a></dd>
                        <dd><a href="Add_a_reservation.html">添加预定</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">营业查询</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Check-in_guest_enquiry.html">入住宾客查询</a></dd>
                        <dd><a href="Member_of_the_query.html">会员查询</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">系统设置</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Data_management.html">数据管理</a></dd>
                        <dd><a href="VIP_set_up.html">VIP设置</a></dd>
                        <dd><a href="Billing_Settings.html">计费设置</a></dd>
                        <dd><a href="Set_up_the_room.html" style="background-color: #1E90FF">房间设置</a></dd>
                        <dd><a href="Operator_setup.html">操作员设置</a></dd>
                    </dl>
                </li>
                 <li class="layui-nav-item">
                    <a href="javascript:;">订单信息</a>
                    <dl class="layui-nav-child">
                    <dd><a href="javascript:void(0);" onclick="tan()">查看订单信息</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div style="padding: 15px;">
        	<div class="layui-tab layui-tab-card" >
			  <ul class="layui-tab-title">
			    <li class="layui-this">添加房间</li>
			    <li>操作房间</li>
			    <li>新增房间类型</li>
			    <li>房间类型展示</li>
			  </ul>
			  <div id="ltc" class="layui-tab-content" style="height: 680px;">
			    <div class="layui-tab-item layui-show">
			    	<form action="/room" method="post" class="layui-form" accept-charset="utf-8" id="addroom" >
			    		<div class="layui-form-item">
			    			<label class="layui-form-label">房间号</label>
						    <div class="layui-input-block">
						      <input id="RNo" type="text" name="roomNumber" required  lay-verify="required" placeholder="请输入房间号" autocomplete="off" class="layui-input">
						    </div>
			    		</div>
					     <div class="layui-form-item">
					     	<label class="layui-form-label">房间类型</label>
						    <div id="divtype" class="layui-input-block">
						     <select id="roomT" name="type[id]"  >
						        <option value=""></option>
						        <option value="1">豪华房</option>
						        <option value="2">行政房</option>
						     </select>
						    </div> 
					     </div>
					     <div class="layui-form-item">
					     	<label class="layui-form-label">房间状态</label>
						    <div id="divstatus" class="layui-input-block">
						     <select id="roomstatus"  name="status" lay-verify="required" >
						     	<option value=""></option>
						        <option value="可入住">可入住</option>
						        <option value="正在使用">正在使用</option>
						        <option value="正在打扫">正在打扫</option>
						        <option value="5">已删除</option>
						     </select>
						    </div>
					     </div>
					     <div class="layui-form-item">
					     	<label class="layui-form-label">所属酒店</label>
						    <div id='divhotel' class="layui-input-block">
						     <select id="roomhotel" name="hotel[id]" lay-verify="required" >
						     	<option value=""></option>
						        <option value="1">miss大酒店成都西门店</option>
						        <option value="2">miss大酒店成都东门店</option>
						        <option value="3">miss大酒店成都南门店</option>
						        <option value="4">miss大酒店成都北门店</option>
						     </select>
						    </div>
					     </div>
			    		<div class="layui-form-item">
					    
			    	</form>
			    		<div class="layui-input-block">
					      <button class="layui-btn"  type="button"  onclick="add()">立即提交</button>
					      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
					    </div>
			    </div>
			  </div>
			     <div class="layui-tab-item">
			    	<div class="t_content" style="height: 550px;">
			    		<table class="layui-table"  lay-even lay-skin="row" lay-size="lg"> 
			    		<thead>
			    			<tr>
			    				<th>房间号</th>
			    				<th>房间类型</th>
			    				<th>房间状态</th>
			    				<th>操作</th>
			    			</tr>
			    		</thead>
			    		<tbody id="roomtable">
			    			<tr>
			    				<td>1201</td>
			    				<td>豪华房</td>
			    				<td>可入住</td>
			    				<td>
			    					<input class="layui-btn" type="button" value="删除"></input>
			    				    <input class="layui-btn" type="button" value="编辑" data-toggle="modal" data-target="#myModal"></input>
			    				</td>
			    			</tr>
			    			<tr>
			    				<td>1201</td>
			    				<td>豪华房</td>
			    				<td>可入住</td>
			    				<td>
			    					<input class="layui-btn" type="button" value="删除"></input>
			    				    <input class="layui-btn" type="button" value="编辑" data-toggle="modal" data-target="#myModal"></input>
			    				</td>
			    			</tr>
			    			<tr>
			    				<td>1201</td>
			    				<td>豪华房</td>
			    				<td>可入住</td>
			    				<td>
			    					<input class="layui-btn" type="button" value="删除" ></input>
			    				    <input class="layui-btn" type="button" value="编辑" data-toggle="modal" data-target="#myModal"></input>
			    				</td>
			    			</tr>
			    			<tr>
			    				<td>1201</td>
			    				<td>豪华房</td>
			    				<td>可入住</td>
			    				<td>
			    					<input class="layui-btn" type="button" value="删除"></input>
			    				    <input class="layui-btn" type="button" value="编辑" data-toggle="modal" data-target="#myModal"></input>
			    				</td>
			    			</tr>
			    			<tr>
			    				<td>1201</td>
			    				<td>豪华房</td>
			    				<td>可入住</td>
			    				<td>
			    					<input class="layui-btn" type="button"  value="删除"></input>
			    				    <input class="layui-btn" type="button" value="编辑" data-toggle="modal" data-target="#myModal"></input>
			    				</td>
			    			</tr>
			    		</tbody>
			    	</table>
			    	</div>
			    	<div id="roomtablepage" style="float: right;" class="t_foot">
			    		<input class="layui-btn layui-btn-sm" type="button" value="第一页"/>
			    		<input class="layui-btn layui-btn-sm" type="button" value="1" />
			    		<input class="layui-btn layui-btn-sm" type="button" value="最后一页"/>
			    	</div>
			    </div>
			    <div class="layui-tab-item">
			    	<form id="addform" method="post"  action="/img">
			    		<div class="layui-form-item">
			    			<label class="layui-form-label">类型名称</label>
						    <div class="layui-input-block">
						      <input type="text" name="name" required  lay-verify="required" placeholder="请输入房间类型" autocomplete="off" class="layui-input">
						    </div>
			    		</div>
			    		<div class="layui-form-item">
			    			<label class="layui-form-label">房间价格</label>
						    <div class="layui-input-block">
						      <input type="text" name="price" required  lay-verify="required" placeholder="请输入房间价格" autocomplete="off" class="layui-input">
						    </div>
			    		</div>
			    		<div class="layui-form-item">
			    			<label class="layui-form-label">打折比率</label>
						    <div class="layui-input-block">
						      <input type="text" name="discounts" required  lay-verify="required" placeholder="请输入房间比率" autocomplete="off" class="layui-input">
						    </div>
			    		</div>
			    		<!-- <div class="layui-form-item">
			    			<label class="layui-form-label">房间号</label>
						    <div class="layui-input-block">
						      <input type="text" name="title" required  lay-verify="required" placeholder="请输入房间号" autocomplete="off" class="layui-input">
						    </div>
			    		</div> -->
			    		<div class="layui-form-item">
			    			<label class="layui-form-label">类型描述</label>
						    <div class="layui-input-block">
						      <input type="text" name="message" required  lay-verify="required" placeholder="请输入房间类型描述(不超过100字)" autocomplete="off" class="layui-input">
						    </div>
			    		</div>
			    		<!-- <div class="layui-form-item">
			    			<label class="layui-form-label">上传图片</label>
							<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
							    预览图：
							    <div class="layui-upload-list" id="demo2"></div>
							 </blockquote>
				       		<div style="padding-left: 100px" class="form-group">
				                <input type="file" id="doc-form-file" name="image" multiple="multiple">
				            </div>
			    		</div> -->
			    		<div id="inputBox">
							<input type="file" name="file" title="请选择图片" id="file" multiple="multiple" accept="image/png,image/jpg,image/gif,image/JPEG"/>选择图片
						</div>
					    <div id="imgBox">
					    
					    </div>
			    		<div class="layui-form-item">
			    			<div class="layui-input-block">
						       <button id="sub" type = "button" class="layui-btn" lay-submit lay-filter="formDemo" >立即提交</button>
						       <button type="reset" class="layui-btn layui-btn-primary">重置</button>
						    </div>
			    		</div>
			    	</form>
			    	
			    </div>
			    
			    
			   <div class="layui-tab-item">
			    	<div class="t_content" style="height: 550px;">
			    		<table class="layui-table"  lay-even lay-skin="row" lay-size="lg"> 
			    		<thead>
			    			<tr>
			    				<th>房间类型</th>
			    				<th>房间价格</th>
			    				<th>房间类型优惠</th>
			    				<th>展示<th>
			    			</tr>
			    		</thead>
			    		<tbody id="roomTypeTable">
			    			<tr>
			    				<td>1201</td>
			    				<td>豪华房</td>
			    				<td>可入住</td>
			    				<td>
			    				    <input class="layui-btn" type="button" value="展示" data-toggle="modal" data-target="#myModal"></input>
			    				</td>
			    			</tr>
			    		</tbody>
			    	</table>
			    	</div>
			    </div>
			</div>
        </div>
        
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © MISS酒店
    </div>
</div>

 <div class="modal fade" id="webSocketModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-dialog" style="height: 300px">
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">订单信息</h4>
      </div>
      <div class="modal-body" style="height: 300px">
        <div class="form-group" style="float: left;"></br>
			 <textarea id="message_content" class="form-control" readonly="readonly" cols="80" rows="10"></textarea>
		</div>
       </div>
    </div>
  </div>
</div><!-- /.modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-dialog" style="z-index: 1041;">
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">修改房间</h4>
      </div>
      <div class="modal-body">
        <form action="" enctype="multipart/form-data" method="post" role="form" class="form-horizontal" id="changeroom">
        	<div class="form-group">
        		<label for="name" >&nbsp;&nbsp;&nbsp;&nbsp;房间号：</label>
        		<input  readonly="readonly" style="display: inline-block;width: 240px;" type="text" class="form-control"  name="roomNumber" placeholder="房间号：" id="roomNumber">
    		</div>
    		<div id="changetype" class="form-group">
        		<label for="name" >房间类型：</label>
        		
        			<input  readonly="readonly" style="display: inline-block;width: 240px;" type="text" class="form-control"  name="name" placeholder="房间类型：" id="roomTyoe">
    				
        		</div>
    		<div id="changestatus" class="form-group">
        		<label for="name" >房间状态：</label>
        		
        			<input  readonly="readonly" style="display: inline-block;width: 240px;" type="text" class="form-control"  name="name" placeholder="房间状态：" id="roomStatus">
    			
        		</div>
    		<div id="changehotel" class="form-group">
        		<label for="name" >所属酒店：</label>
        		
	        		<input readonly="readonly" style="display: inline-block;width: 240px;" type="text" class="form-control"  name="name" placeholder="所属酒店：" id="roomHotel">
	    		
        		</div>
    		<div class="modal-footer">
		        <button type="button"  class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button"  disabled="disabled" class="btn btn-primary" id="roomButton" onclick="change()">提交</button>
		        <button type="button" class="btn btn-primary" id="roomChange" onclick="canchange()">修改</button>
	     	</div>
        </form>
       </div>
    </div>
  </div>
</div><!-- /.modal -->
<div class="modal fade" id="webSocketModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-dialog" style="height: 300px">
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">订单信息</h4>
      </div>
      <div class="modal-body" style="height: 300px">
        <div class="form-group" style="float: left;"></br>
			 <textarea id="message_content" class="form-control" readonly="readonly" cols="80" rows="10"></textarea>
		</div>
       </div>
    </div>
  </div>
</div><!-- /.modal -->
<div class="modal fade" id="imgesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-dialog" style="height: 300px">
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">订单信息</h4>
      </div>
      <div class="modal-body" style="height: 300px">
        <div class="form-group" style="float: left;"></br>
			 <textarea id="message_content" class="form-control" readonly="readonly" cols="80" rows="10"></textarea>
		</div>
       </div>
    </div>
  </div>
</div><!-- /.modal -->


<script src="../js/layui.all.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../bt/jquery2.0.3.min.js"></script>
<script src="../bt/modal.js"></script>
<script src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.min.js"></script>
<script type="text/javascript">
function tan(){
	$("#webSocketModal").modal('show')
}
var imgSrc = [];  //存放图片路径
var imgFile = []; //存放文件流
var imgName = []; //存放图片名字
//选择图片的操作
function imgUpload(obj) {
	var oInput = '#' + obj.inputId;
	var imgBox = '#' + obj.imgBox;
	var btn = '#' + obj.buttonId;
	//用on是因为它可以动态的绑定事件
	$(oInput).on("change", function() {
		//获取type=file的input
		var fileImg = $(oInput)[0];
		//得到所有的图片列表
		var fileList = fileImg.files;
		for(var i = 0; i < fileList.length; i++) {
			//得到每个图片的路径
			var imgSrcI = getObjectURL(fileList[i]);
			//向文件名的数组末尾添加此文件名
			imgName.push(fileList[i].name);
			//向路径的数组末尾添加路径
			imgSrc.push(imgSrcI);
			//在文件流数组的末尾添加文件
			imgFile.push(fileList[i]);
		}
		//将图片展示出去
		addNewContent(imgBox);
	})
	
	$(btn).on('click', function() {
		if(!limitNum(obj.num)){
		  	alert("最多只能上传"+obj.num+"张照片!");
		  	return false;
		}
		
		//用FormData对象上传
		var fd = new FormData($('#addform')[0]);
		//由于fd对象中已经包含<input type='file'>的input标签，如果不删除，就会造成重复上传
		fd.delete("file");
		//将文件流循环添加到FormData对象中
		for(var i=0;i<imgFile.length;i++){
			fd.append(obj.data,imgFile[i]);
		}
		//上传所有的图片
		submitPicture(obj.upUrl, fd);
	})
}
//图片展示
function addNewContent(obj) {
	$(imgBox).html("");
	for(var a = 0; a < imgSrc.length; a++) {
		var oldBox = $(obj).html();
		$(obj).html(oldBox + '<div class="imgContainer"><img title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' onclick="imgDisplay(this)"><p onclick="removeImg(this,' + a + ')" class="imgDelete">删除</p></div>');
	}
}
//删除
function removeImg(obj, index) {
	//向数组中删除元素
	imgSrc.splice(index, 1);
	imgFile.splice(index, 1);
	imgName.splice(index, 1);
	var boxId = "#" + $(obj).parent('.imgContainer').parent().attr("id");
	addNewContent(boxId);
}
//限制图片个数
function limitNum(num){
	if(!num){
		return true;
	}else if(imgFile.length>num){
		return false;
	}else{
		return true;
	}
}

//上传(将文件流数组传到后台)
function submitPicture(url,data) {
    for (var p of data) {
	  	console.log(p);
	}
	if(url&&data){
		$.ajax({
			type: "post",
			url: url,
			async: true,
			data: data,
			//下面这两个要写成false，要不然上传不了。
			processData: false,
			contentType: false,
			success: function(dat) {
				alert(dat)
				$("#addform").find("input").val("")
				$("#imgBox").html("")
			}
		});
	}else{
	  alert('数据格式不正确!');
	}
}
//当鼠标移到图片上时，显示x删除
function imgDisplay(obj) {
	var src = $(obj).attr("src");
	var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;"><img src=' + src + ' style="margin-top: 100px;width: 70%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" onclick="closePicture(this)">×</p></div>'
	$('body').append(imgHtml);
}
//关闭
function closePicture(obj) {
	$(obj).parent("div").remove();
}
//图片预览路径
function getObjectURL(file) {
	var url = null;
	if(window.createObjectURL != undefined) { // basic
		url = window.createObjectURL(file);
	} else if(window.URL != undefined) { // mozilla(firefox)
		url = window.URL.createObjectURL(file);
	} else if(window.webkitURL != undefined) { // webkit or chrome
		url = window.webkitURL.createObjectURL(file);
	}
	return url;
}
</script>
<script>
var rid = 0;
function change(){
	var room = $("#changeroom").serializeJSON();
	console.info(JSON.stringify(room))
	$.ajax({
		url:"/room",
		type:"put",
		async:true,
		contentType:"application/json;charset=utf-8",
		data:JSON.stringify(room),
		success:function(mes){
			alert(mes)
			$('#myModal').modal('hide');
		},
		
		
	}) 
}


function showType(){
	$.ajax({
		url:"/roomtype1",
		type:"get",
		async:true,
		dataType:"json",
		success:function(mes){
			console.info("dayin")
			console.info(mes);
			var str = "";
			for (var i = 0; i < mes.length; i++) {
				var dis = mes[i].discounts*10;
				if(dis==10){
					dis="不打折"
				}else{
					dis=dis+"折"
				}
				
				str+="<tr><td>"+mes[i].name+"</td><td>"+mes[i].price+"</td><td>"+dis+"</td><td><input type='button' value='展示'  onclick='zhanshi("+mes[i].id+")' /><td></tr>";
			
			}
			$("#roomTypeTable").html(str)
		}
	})
}

function zhanshi(images){
	$.ajax({
		url:"/roomtype/"+images,
		type:"get",
		dataType:"json",
		async:true,
		success:function(mes){
			console.info(mes)
			var imgs = mes.images
			for (var i = 0; i < imgs.length; i++) {
				
			}
		}
	$("#imgesModal").modal('show')
})

}

function dele(roomid){
	var roomt = {"id":roomid,"status":"5"}
	$.ajax({
		url:"/room",
		type:"put",
		async:true,
		contentType:"application/json;charset=utf-8",
		data:JSON.stringify(roomt),
		success:function(mes){
			alert(mes)
			show()
		}
	})
}
imgUpload({
	inputId:'file', //input框id
	imgBox:'imgBox', //图片容器id
	buttonId:'sub', //提交按钮id
	upUrl:'/roomtype',  //提交地址
	data:'file', //参数名
	num:"10"//最多上传图片个数
})
function addRT(){
	var roomT = $("#addform").serializeJSON();
	console.info(JSON.stringify(roomT));
	
	
	/* $.ajax({
		url:"/roomtype",
		method:"post",
		async:true,
		contentType:"application/json;charset=utf-8",
		data:JSON.stringify(roomT),
		success:function(mes){
			alert(mes)
		},
	}) */
	
	/* var file = document.getElementById("doc-form-file").files[0];
	console.info(file)
	var formData = new FormData();
	formData.append("file",file)
	formData.append("roomT",new Blob([JSON.stringify(roomT)], {type: "application/json"}))
	$.ajax({
		url:"/roomtype",
		type:"post",
		contentType: false,
        //取消序列换 formData本来就是序列化好的
        processData: false,
        dataType: "json",
        data: formData,
		success:function(mes){
			alert(mes)
		}
	})  */
	
}

layui.use(['element', 'layer'], function(){
  var element = layui.element
  ,layer = layui.layer;
  
  element.on('tab(docDemoTabBrief)', function(data){
    layer.msg('切到到了'+ data.index + '：' + this.innerHTML);
  });
});
layui.use('upload', function(){
    var $ = layui.jquery
  ,upload = layui.upload;
  
    upload.render({
    elem: '#test2'
    ,url: '/img/'
    ,multiple: true
    ,method:'post'
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
      });
    }
    ,done: function(res){
    	console.info(res)
    }
  });

});

function canchange(){
	var bef1 = "<select style='width: 240px;display: inline-block;' class='form-control' name='type[id]'>"
	var bef2 = "<select style='width: 240px;display: inline-block;' class='form-control' name='hotel[id]'>"
	var bef3 = "<select style='width: 240px;display: inline-block;' class='form-control' name='status'>"
	var aft = "</select><input type ='hidden' id='roomid' name='id'value='"+rid+"'>"
	var type =bef1+$("#roomT").html()+aft;
	var hotel =bef2+$("#roomhotel").html()+aft;
	var status =bef3+$("#roomstatus").html()+aft;
  /*  	$("#roomHotel").removeAttr("readonly");
   	$("#roomStatus").removeAttr("readonly"); */
   	$("#roomNumber").removeAttr("readonly");
   	/* $("#roomTyoe").removeAttr("readonly"); */
   	$("#changehotel").children("input").remove();
   	$("#changetype").children("input").remove();
   	$("#changestatus").children("input").remove();
   	
    $("#changehotel").append(hotel)
   	$("#changetype").append(type)
   	$("#changestatus").append(status) 
   	
   	$("#roomButton").removeAttr("disabled")
}
$(function(){
	showType()
	layui.use('form', function(){
		 var form = layui.form;
		/* 加载完页面动态更新房间类型下拉框 */
		$.ajax({
			type:"get",
			url:"/roomtype1",
			async:true,
			dataType:"json",
			contentType:"application/json;charset=utf-8",
			success:function(message){
				console.info(message)
				var str = "<option value=''></option>";
				for (var i = 0; i < message.length; i++) {
					str+="<option value='"+message[i].id+"'>"+message[i].name+"</option>";
				}
				$("#roomT").html(str);
				form.render();
			}
		})
		/* 加载完页面动态更新酒店下拉框 */
		$.ajax({
			type:"get",
			url:"/hotel/show",
			async:true,
			dataType:"json",
			success:function(message){
				console.info(message)
				var str = "<option value=''></option>";
				for (var i = 0; i < message.length; i++) {
					str+="<option value='"+message[i].id+"'>"+message[i].name+"</option>";
				}
				$("#roomhotel").html(str);
				form.render();
			}
		})
	})
	
	$.ajax({
		url:"/rooms/1/7",
		type:"get",
		async:true,
		success:function(mes){
			console.info(mes)
			var list = mes.list; 
			var totalpage = mes.pages;
			var lastpage = mes.lastPage;
			console.info("totalpage "+totalpage)
			console.info("lastpage "+lastpage)
			var str = "";
			for (var i = 0; i < list.length; i++) {
				str+="<tr><td>"+list[i].roomNumber+"</td><td>"  
				+list[i].type.name+"</td><td>"+list[i].status+"</td><td><input onclick='dele("+list[i].id+")' class='layui-btn' type='button' value='删除'></input>"
				+"<button class='layui-btn' type='button'  data-toggle='modal' data-target='#myModal'  value='"+list[i].id+"'><input type='hidden' value='"+list[i].id+"'/>编辑</button></td></tr>";
			}
			$("#roomtable").html(str);
			var res = "<input onclick='page(1)' class='layui-btn layui-btn-sm' type='button' value='first'/> ";
			for (var i = 1; i <=totalpage; i++) {
				if(i==1){
					res+="<input onclick='page("+i+")' class='layui-btn layui-btn-primary layui-btn-sm' type='button' value='"+i+"'/>";
					continue;
				}
				res+="<input onclick='page("+i+")' class='layui-btn layui-btn-sm' type='button' value='"+i+"'/>";
			}
			res+="<input onclick='page("+lastpage+")' class='layui-btn layui-btn-sm' type='button' value='last'/> ";
			$("#roomtablepage").html(res)
		}
	})
})
function add(){
	var res = $("#addroom").serializeJSON();
	console.info(res)
	console.info(JSON.stringify(res))
	$.ajax({
		url:"/room",
		type:"post",
		async:true,
		contentType:"application/json;charset=utf-8",
		data:JSON.stringify(res),
		success:function(mes){
			alert(mes)
			$("#RNo").val("")
			show()
		},
		
		
	})
}
function show(){
	$.ajax({
		url:"/rooms/1/7",
		type:"get",
		async:true,
		success:function(mes){
			console.info(mes)
			var list = mes.list; 
			var totalpage = mes.pages;
			var lastpage = mes.lastpage;
			var str = "";
			for (var i = 0; i < list.length; i++) {
				str+="<tr><td>"+list[i].roomNumber+"</td><td>"  
				+list[i].type.name+"</td><td>"+list[i].status+"</td><td><input onclick='dele("+list[i].id+")' class='layui-btn' type='button' value='删除'></input>"
				+"<button class='layui-btn' type='button'  data-toggle='modal' data-target='#myModal'  value='"+list[i].id+"'><input type='hidden' value='"+list[i].id+"'/>编辑</button></td></tr>";
			}
			$("#roomtable").html(str);
			var res = "<input onclick='page(1)' class='layui-btn layui-btn-sm' type='button' value='first'/> ";
			for (var i = 1; i <=totalpage; i++) {
				if(i==1){
					res+="<input onclick='page("+i+")' class='layui-btn layui-btn-primary layui-btn-sm' type='button' value='"+i+"'/>";
					continue;
				}
				res+="<input onclick='page("+i+")' class='layui-btn layui-btn-sm' type='button' value='"+i+"'/>";
			}
			res+="<input onclick='page("+lastpage+")' class='layui-btn layui-btn-sm' type='button' value='last'/> ";
			$("#roomtablepage").html(res)
		}
	})
}
$('#myModal').on('show.bs.modal', function (e) {
	 rid = $(e.relatedTarget).children("input").val();
	 $.ajax({
		 url:"/room/"+rid,
	 	type:"get",
	 	async:true,
	 	success:function(mes){
	 		$("#roomNumber").val(mes.roomNumber)
	 		$("#roomTyoe").val(mes.type.name)
	 		$("#roomStatus").val(mes.status)
	 		$("#roomHotel").val(mes.hotel.name)
	 	}
	 }) 
	 
})
$('#myModal').on('hidden.bs.modal', function (e){
	$("#changehotel").children("select").remove();
   	$("#changetype").children("select").remove();
   	$("#changestatus").children("select").remove();
   	$("#changehotel").children("input").remove();
	$("#changetype").children("input").remove();
	$("#changestatus").children("input").remove();
   	var hotel = "<input type ='hidden' id='roomid' name='id'><input  readonly='readonly' style='display: inline-block;width: 240px;' type='text' class='form-control'   placeholder='所属酒店：' id='roomHotel'>"
 	var type = "<input  readonly='readonly' style='display: inline-block;width: 240px;' type='text' class='form-control'   placeholder='房间类型：' id='roomTyoe'>"
 	var status = "<input  readonly='readonly' style='display: inline-block;width: 240px;' type='text' class='form-control'   placeholder='房间状态：' id='roomStatus'>"
    $("#changehotel").append(hotel)
   	$("#changetype").append(type)
   	$("#changestatus").append(status) 
   	$("#roomNumber").attr("readonly","readonly")
   	$("#roomButton").attr("disabled","disabled")
   	show();
})

function page(nowpage){
	$.ajax({
		url:"/rooms/"+nowpage+"/7",
		type:"get",
		async:true,
		success:function(mes){
			console.info(mes)
			var list = mes.list; 
			var totalpage = mes.pages;
			var lastpage = mes.lastPage;
			var str = "";
			for (var i = 0; i < list.length; i++) {
				str+="<tr><td>"+list[i].roomNumber+"</td><td>"
				+list[i].type.name+"</td><td>"+list[i].status+"</td><td><input onclick='dele("+list[i].id+")' class='layui-btn' type='button' value='删除'></input>"
				+"<input class='layui-btn' type='button' value='编辑' data-toggle='modal' data-target='#myModal'><input type='hidden' value='"+list[i].id+"'/></input></td></tr>";
			}
			$("#roomtable").html(str);
			var res = "<input onclick='page(1)' class='layui-btn layui-btn-sm' type='button' value='first'/> ";
			for (var i = 1; i <=totalpage; i++) {
				if(i==nowpage){
					res+="<input onclick='page("+i+")' class='layui-btn layui-btn-primary layui-btn-sm' type='button' value='"+i+"'/>";
					continue;
				}
				res+="<input onclick='page("+i+")' class='layui-btn layui-btn-sm' type='button' value='"+i+"'/>";
				
			}
			res+="<input onclick='page("+lastpage+")' class='layui-btn layui-btn-sm' type='button' value='last'/> ";
			$("#roomtablepage").html(res)
		}
	})
}
$("#doc-form-file").change(function(e) {
    for (var i = 0; i < e.target.files.length; i++) {
      var file = e.target.files.item(i);			
      var freader = new FileReader();
      freader.readAsDataURL(file);
      freader.onload = function(e) {
        var src = e.target.result;
        var img = "<img style='width: 90px;height: 110px;' src="+src+"  />"
       $("#demo2").append(img)
      }
    }
});
</script>
<script type="text/javascript">

var websocket = null;
//浏览器是否支持
if ('WebSocket' in window) {
  // 上面我们给webSocket定位的路径
  websocket = new WebSocket('ws://localhost:8080/webSocket');
} else {
  alert('该浏览器不支持websocket!');
}
//建立连接
websocket.onopen = function (event) {
  console.log('建立连接');
				
}
//关闭连接
websocket.onclose = function (event) {
  console.log('连接关闭');
}
//消息来的时候的事件
websocket.onmessage = function (event) {
  // 这里event.data就是我们从后台推送过来的消息
  console.log('收到消息:' + event.data);
  $('#message_content').append(event.data+'\n');
  // 在这里我们可以在页面中放置一个音乐，例如“您有新的订单了！”这样的提示音
  	document.getElementById("myAudio").play();
}

//发生错误时
websocket.onerror = function () {
  alert('websocket通信发生错误！');
}
//窗口关闭时，Websocket关闭
window.onbeforeunload = function () {
  websocket.close();
}

</script>
<audio src="../video/dingdong.mp3"  id="myAudio" ></audio>
</body>
</html>